<template>
  <div>
    <van-nav-bar title="电卡管理" left-arrow left-text="用户"  @click-left="onClickLeft"/>
    <van-cell-group class="mt15" inset>
      <van-field
        v-model="cardNo"
        label="电卡号"
        placeholder="请输入卡号或扫描电卡"
        right-icon="scan"
        clearable
        @click-right-icon="getScan"
      />
    </van-cell-group>
    <!-- 查询按钮 -->
    <div class="block" v-if="!cardInfo || !cardNo">
      <van-button type="primary" size="large" @click="loadCardInfo">查询电卡</van-button>
    </div>
    <!-- 电卡详情 -->
    <template v-else>
      <div class="block">
        <van-grid class="grid-box" :column-num="2">
          <van-grid-item text="电卡余额">
            <div class="grid-value" slot="icon">{{cardInfo.balance || '--'}} 元</div>
          </van-grid-item>
          <van-grid-item text="赠送金额">
            <div class="grid-value" slot="icon">{{cardInfo.give || '--'}} 元</div>
          </van-grid-item>
          <van-grid-item text="持卡人">
            <div class="grid-value" slot="icon">{{cardInfo.name || '--'}}</div>
          </van-grid-item>
          <van-grid-item text="持卡人电话">
            <div class="grid-value" slot="icon">{{cardInfo.phone || '--'}}</div>
          </van-grid-item>
        </van-grid>
      </div>
      <van-cell-group inset>
        <van-cell title="电卡充值" :to="'/card/recharge/' + cardInfo.cardNo" is-link />
        <van-cell title="充值记录" :to="'/card/recharge/record/' + cardInfo.cardNo" is-link />
        <van-cell title="充电记录" :to="'/card/charge/record/' + cardInfo.cardNo"  is-link />
      </van-cell-group>
      <div style="padding:16px 16px 0px 16px">
        <van-button round size="small" v-if="bindCards.filter(function (item) { return item == cardInfo.cardNo; }).length == 0" block type="primary" @click="bindCard">添加电卡</van-button>
        <van-button round size="small" v-if="bindCards.filter(function (item) { return item == cardInfo.cardNo; }).length != 0" block type="warning" @click="unbindCard">解除电卡</van-button>
      </div>
    </template>
    <van-divider v-if="!cardInfo || !cardNo" :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
      我的电卡
    </van-divider>
    <div class="top-pane" v-if="!cardInfo || !cardNo">
      <div v-for="card in bindCards" :key="card" class="base-info">
        <van-icon name="card" color="#1989fa" size="60" />
        <div class="user">
          <div class="name">电卡号：{{card}} </div>
        </div>
        <div class="arrow">
          <van-icon name="eye-o" size="16" @click="showCard(card)" color="#07c160">详细</van-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Card',
  data () {
    return {
      bindCards: [],
      cardNo: '',
      cardInfo: null
    }
  },
  computed: {},
  created () {
    if (sessionStorage.getItem('cardNo')) {
      this.cardNo = sessionStorage.getItem('cardNo')
      sessionStorage.removeItem('cardNo')
    }
    if (this.$route.query.cardNo) {
      this.cardNo = this.$route.query.cardNo
      this.loadCardInfo()
    } else {
      this.getBindCard()
    }
  },
  mounted () {},
  watch: {
    cardNo (val) {
      if (!val) {
        this.cardInfo = null
      }
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/')
      this.$store.dispatch('updateUserInfo')
    },
    getScan () {
      this.$store.dispatch('getScan')
    },
    loadCardInfo () {
      this.$http.get('/restful/kxCard/getByNo', {
        params: {
          cardNo: this.cardNo
        }
      }).then(res => {
        if (res.code === 'ok') {
          this.cardInfo = res.data
        } else {
          this.$toast.fail(res.msg)
        }
      })
    },
    getBindCard () {
      this.$http.get('/restful/kxCard/getBindCard').then(res => {
        if (res.code === 'ok') {
          this.bindCards = res.data
        } else {
          this.$toast.fail(res.msg)
        }
      })
    },
    bindCard () {
      if (this.cardInfo) {
        this.$dialog.confirm({
          title: '添加电卡',
          message: '确定添加电卡号[' + this.cardInfo.cardNo + ']？'
        }).then(() => {
          this.$http.get('/restful/kxCard/bindCard?cardNo=' + this.cardInfo.cardNo).then(res => {
            if (res.code === 'ok') {
              this.$toast.success(res.msg)
              this.getBindCard()
            } else {
              this.$toast.fail(res.msg)
            }
          })
        }).catch(() => {})
      } else {
        this.$toast.fail('没有电卡号')
      }
    },
    unbindCard () {
      if (this.cardInfo) {
        this.$dialog.confirm({
          title: '解除电卡',
          message: '确定解除电卡号[' + this.cardInfo.cardNo + ']？'
        }).then(() => {
          this.$http.get('/restful/kxCard/unbindCard?cardNo=' + this.cardInfo.cardNo).then(res => {
            if (res.code === 'ok') {
              this.$toast.success(res.msg)
              this.getBindCard()
            } else {
              this.$toast.fail(res.msg)
            }
          })
        }).catch(() => {})
      } else {
        this.$toast.fail('没有电卡号')
      }
    },
    showCard (card) {
      this.cardNo = card
      this.loadCardInfo()
    }
  }
}
</script>

<style scoped lang='less'>
.grid-value {
  padding-bottom: 10px;
}
.top-pane {
  margin: 15px;
  padding: 15px; padding-bottom: 0; padding-top: 0;
  background: #fff;
  .base-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .user {
      flex: auto;
      padding-left: 15px;
      .name {
        font-size: 16px;
        line-height: 28px;
      }
      .phone {
        font-size: 14px
      }
    }
  }
}
</style>
